<template>
	<view style="background-color: #F6F6F6;">
		<u-navbar title="分类商品" :autoBack="false" :bgColor="theme_color" :titleStyle="{color:'#ffffff'}"
			:leftIconColor="theme_color"></u-navbar>

		<view class="bg-white top-warp" :style="'top:' + (navH-5) + 'px;'">
			<u-search placeholder="搜索感兴趣的商品" :showAction="false" v-model="goods_name" @search="searchGoods">
			</u-search>
		</view>

		<!-- 左边 -->
		<scroll-view class="left-warp" :scroll-y="true" :style="'top:' + (navH+50) + 'px;'">
			<view class="tab" :class="{active:i==tabIndex}" v-for="(tab,i) in tabs" :key="i" @click="tabChange(tab,i)">
				{{tab.cat_name}}
			</view>
		</scroll-view>

		<view class="right-warp bg-white" :style="'padding-top:' + (navH+170) + 'rpx;'">
			<view style="padding: 5px;" v-if="banner.length>0">
				<u-swiper :list="banner" height="150"></u-swiper>
			</view>
			
			<view class="select-box fs-12">
				
				<view class="item">
					<!-- 未选择的 -->
					<view @click="selectPrice()" v-if="!goods_price_selected" class="left">
						价格
					</view>
					<view @click="selectPrice()" v-if="goods_price_selected" class="left-2">
						价格
					</view>
					<view @click="selectPrice()" class="right">
						<view class="top">
							<!-- 未选择 -->
							<view v-if="!goods_price_up_selected" class="img-s">
								<image :src="ima_url+'/static/Applets/static/images/store_up_s.png' " mode="">
								</image>
							</view>
							<!-- 选择 -->
							<view v-if="goods_price_up_selected" class="img-s">
								<image :src="ima_url+'/static/Applets/static/images/store_up_sed.png' " mode="">
								</image>
							</view>
						</view>
						<view class="bottom">
							<view class="img-s">
								<!-- 未选择 -->
								<view v-if="!goods_price_under_selected" class="img-s">
									<image :src="ima_url+'/static/Applets/static/images/store_under_s.png' " mode="">
									</image>
								</view>
								<!-- 选择 -->
								<view v-if="goods_price_under_selected" class="img-s">
									<image :src="ima_url+'/static/Applets/static/images/store_under_sed.png' " mode="">
									</image>
								</view>
							</view>
			
						</view>
					</view>
					<!-- 选择的 -->
				</view>
				
				<view class="item">
					<!-- 未选择的 -->
					<view @click="selectSales()" v-if="!goods_sales_selected" class="left">
						销量
					</view>
					<!-- 选择的 -->
					<view @click="selectSales()" v-if="goods_sales_selected" class="left-2">
						销量
					</view>
					<view @click="selectSales()" class="right">
						<view class="top">
							<!-- 未选择 -->
							<view v-if="!goods_sales_up_selected" class="img-s">
								<image :src="ima_url+'/static/Applets/static/images/store_up_s.png' " mode="">
								</image>
							</view>
							<!-- 选择 -->
							<view v-if="goods_sales_up_selected" class="img-s">
								<image :src="ima_url+'/static/Applets/static/images/store_up_sed.png' " mode="">
								</image>
							</view>
						</view>
						<view class="bottom">
							<view class="img-s">
								<!-- 未选择 -->
								<view v-if="!goods_sales_under_selected" class="img-s">
									<image :src="ima_url+'/static/Applets/static/images/store_under_s.png' " mode="">
									</image>
								</view>
								<!-- 选择 -->
								<view v-if="goods_sales_under_selected" class="img-s">
									<image :src="ima_url+'/static/Applets/static/images/store_under_sed.png' " mode="">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
			
				<view class="item">
					<!-- 未选择的 -->
					<view @click="selectUpdate()" v-if="!goods_update_selected" class="left">
						更新
					</view>
					<!-- 选择的 -->
					<view @click="selectUpdate()" v-if="goods_update_selected" class="left-2">
						更新
					</view>
					<view @click="selectUpdate()" class="right">
						<view class="top">
							<!-- 未选择 -->
							<view v-if="!goods_update_up_selected" class="img-s">
								<image :src="ima_url+'/static/Applets/static/images/store_up_s.png' " mode="">
								</image>
							</view>
							<!-- 选择 -->
							<view v-if="goods_update_up_selected" class="img-s">
								<image :src="ima_url+'/static/Applets/static/images/store_up_sed.png' " mode="">
								</image>
							</view>
						</view>
						<view class="bottom">
							<view class="img-s">
								<!-- 未选择 -->
								<view v-if="!goods_update_under_selected" class="img-s">
									<image :src="ima_url+'/static/Applets/static/images/store_under_s.png' " mode="">
									</image>
								</view>
								<!-- 选择 -->
								<view v-if="goods_update_under_selected" class="img-s">
									<image :src="ima_url+'/static/Applets/static/images/store_under_sed.png' " mode="">
									</image>
								</view>
							</view>
			
						</view>
					</view>
			
				</view>
				
				<view class="item-3">
					<view @click="newGoods()" class="left" v-if="!is_snew_isShow">
						精品
					</view>
					<view @click="newGoods()" class="left left2" v-if="is_snew_isShow">
						精品
					</view>
				</view>
			</view>

			<u-skeleton rows="5" :loading="ske_loading" :animate="true"></u-skeleton>
			<mescroll-body bottom="100" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="goods-box-content bg-white">
					<view v-for="(item,index) in goodsList" :key="index" style="height: 80px;flex-wrap: wrap;border-bottom: 1px solid #F6F6F6;" 
					class="acea-row padding10 row-middle" @click="goodsDetails(item.goods_id)">
                        <image :src="item.goods_thumb" style="width: 140rpx;height: 140rpx;border-radius: 6px;"></image>
						<view style="padding-left: 10px;flex: 1;height: 100%;" class="acea-row row-column-between">
							<view class="fw-bolder">{{item.goods_name}}</view>
							<view class="acea-row row-between">
								<view class="acea-row row-middle">
									<view style="color: #EF1C25;"><text class="fs-12">￥</text><text class="fs-16">{{item.shop_price}}</text></view>
									<view style="text-decoration: line-through;margin-left: 10px;color: darkgrey;" class="fs-12">￥{{item.market_price}}</view>
								</view>
								<!-- <view style="border-radius: 50%;background-color: #EAF3FF;padding: 5rpx 8rpx;">
									<u-icon name="shopping-cart" color="#3E8EFF" size="18"></u-icon>
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>

		</view>

	</view>
</template>


<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapGetters
	} from "vuex";
	import {
		shop_cate_list,
		search_goods,
		cart_add,
		goods_info,
		shop_ad_list
	} from '@/api/store.js'
	import {
		BASE_URL
	} from "@/config/app";
	export default {
		mixins: [MescrollMixin],
		computed: mapGetters(["isLogin", "app_token"]),
		data() {
			return {
				navH: '',
				theme_color: getApp().globalData.theme_color,
				banner: [],
				tabs: [], // tabs异步获取
				tabIndex: 0, // tab下标

				goods_name: '',
				longtitude: '',
				latitude: '',
				page_area_id: null,

				// 价格筛选
				goods_price_selected: false,
				goods_price_up_selected: false,
				goods_price_under_selected: false,
				// 销量筛选
				goods_sales_selected: false,
				goods_sales_up_selected: false,
				goods_sales_under_selected: false,
				// 更新筛选
				goods_update_selected: false,
				goods_update_up_selected: false,
				goods_update_under_selected: false,

				order: '', //排序字段 价格:shop_price 销量:click_count 更新时间:last_update
				sort: '', //空来下序 倒序：desc
				supplier_id: getApp().globalData.supplier_id,

				goodsList: [],

				// 导航栏分类列表
				all_type_list: [],

				// 精品 热卖  新品
				checked1: false,
				checked2: false,
				checked3: false,
				checked1_tyle: 0,
				checked2_tyle: 0,
				checked3_tyle: 0,
				is_snew_isShow: false,

				// 分类
				select_type_isShow: false,
				select_type_id: '', //分类id
				cat_id: '', //暂存分类id
				type_massage: null,
				frist_cat_name: '', //记录传过来的第一级分类名
				frist_cat_id: '', //记录传过来的第一级分类id

				ima_url: BASE_URL,

				select_type: [],

				// 导航栏分类列表
				all_type_list: [],

				ske_loading: true,
			}
		},
		watch: {
			page_area_id: {
				immediate: true,
				handler(nVal, oVal) {
					var that = this
					if (nVal != oVal) {
						that.mescroll.resetUpScroll();
					}
				}
			}
		},
		onLoad() {
			this.navH = getApp().globalData.navHeight / 2;

			// 店铺分类
			this.getCateList()
			this.getAd()
		},
		onShow() {
			this.page_area_id = this.area_id;
			if (this.userLocation) {
				this.longtitude = this.userLocation.longitude || '';
				this.latitude = this.userLocation.latitude || '';
			}
		},
		methods: {
			// 查看详情
			goodsDetails: function(goods_id) {
				uni.navigateTo({
					url: '/pages/goods/detail/index?goods_id=' + goods_id
				})
			},
			
			getAd() {
				var that = this;
				shop_ad_list({
					supplier_id: that.supplier_id,
					position_id: 10,
					cate_id: that.frist_cat_id
				}).then(res => {
					for (var val of res.data) {
						that.banner.push(val.ad_code);
					}
				})
			},
			getCateList() {
				var _this = this;
				shop_cate_list({
					parent_id: this.frist_cat_id, //分类父级id 0获取顶级分类
					supplier_id: this.supplier_id
				}).then((res2) => {
					var data_string = res2;
					if (res2.data.length == 0 && res2.status == 0) {
						const obj_all = {
							cat_id: this.frist_cat_id,
							cat_name: this.frist_cat_name,
							parent_id: '',
							isShow_bar: true, //第一级父级用来判断选中
							isShow: false,
							isShow_2: false, //用来
							isShow_3: false,
							child_1: [],
							child_2: [], //三级
						}

						_this.all_type_list.push(obj_all);

					} else {
						const obj_all2 = {
							cat_id: this.frist_cat_id,
							cat_name: this.frist_cat_name,
							parent_id: '',
							isShow_bar: true, //第一级父级用来判断选中
							isShow: false, //用来判断是否点中第一级的+ - 号
							isShow_2: false, //用来判断第二级是否被选中
							// isShow_2_2:false,//用来判断是否点中第二级的+ - 号
							isShow_3: false,
							child_1: [],
							child_2: [], //三级
						}
						_this.all_type_list.push(obj_all2);
					}

					for (let value of data_string.data) {
						const obj = {
							cat_id: value.cat_id,
							cat_name: value.cat_name,
							parent_id: value.parent_id,
							isShow_bar: false, //第一级父级用来判断选中
							isShow: false, //用来判断是否点中第一级的+ - 号
							isShow_2: false, //用来判断第二级是否被选中
							isShow_3: false,
							child_1: [],
							child_2: [], //三级
						}
						_this.select_type.push(obj);
						_this.all_type_list.push(obj)

						_this.tabs.push(obj)
					}
					_this.navCount = _this.all_type_list.length
					if (data_string.status == 0) {
						_this.type_massage = '当前商品分类没有下一级分类';
					} else {
						_this.type_massage = '';
					}


				})
			},


			upCallback(page) {
				let that = this;
				search_goods({
					app_token: that.app_token,
					cat_id: that.select_type_id,
					supplier_id: that.supplier_id,
					goods_name: that.goods_name,
					order: that.order,
					sort: that.sort,
					page: page.num,
					brand_id: '',
					is_sbest: that.checked1_tyle, //精 品 0否1是
					is_shot: that.checked2_tyle, //热卖 0否1是
					is_snew: that.checked3_tyle, //新品 0否1是
					area_id: that.loaded_area_id,
					lng: that.longtitude,
					lat: that.latitude
				}).then((res) => {
					that.mescroll.endSuccess(res.data.length);
					if (page.num == 1) this.goodsList = []; //如果是第一页需手动制空列表
					this.goodsList = this.goodsList.concat(res.data); //追加新数据
					that.ske_loading = false;
				}).catch(() => {
					//联网失败, 结束加载
					that.mescroll.endErr();
				})
			},
			// 切换菜单
			tabChange(tab, i) {
				if (this.tabIndex != i) {
					this.tabIndex = i
					this.select_type_id = tab.cat_id
					this.mescroll.resetUpScroll(); // 重置列表数据
				}
			},

			// 按输入的商品名称搜索商品
			searchGoods: function() {
				this.mescroll.resetUpScroll()
			},
			
			// 选择新品
			newGoods: function() {
				var that = this;
				if (this.is_snew_isShow == false) {
					this.checked1_tyle = 1;
					this.is_snew_isShow = true;
			
					this.mescroll.resetUpScroll()
			
				} else if (this.is_snew_isShow == true) {
			
					this.checked1_tyle = 0;
					this.is_snew_isShow = false;
			
					this.mescroll.resetUpScroll()
				}
			
			},

			// 价格筛选
			selectPrice: function() {
				var _this = this;
				if (this.goods_price_selected == false) {
					// 价格下序
					this.goods_price_selected = true;
					this.goods_price_up_selected = true;
					this.goods_price_under_selected = false;
					this.order = 'shop_price';
					this.sort = ''; //空来下序 倒序：desc
					// 销量筛选
					this.goods_sales_selected = false;
					this.goods_sales_up_selected = false;
					this.goods_sales_under_selected = false;
					// 更新筛选
					this.goods_update_selected = false;
					this.goods_update_up_selected = false;
					this.goods_update_under_selected = false;

					this.mescroll.resetUpScroll()

				} else if (this.goods_price_selected == true && this.goods_price_up_selected == true) {
					// 价格倒序
					this.goods_price_selected = true;
					this.goods_price_up_selected = false;
					this.goods_price_under_selected = true;
					this.order = 'shop_price';
					this.sort = 'desc'; //空来下序 倒序：desc
					// 销量筛选
					this.goods_sales_selected = false;
					this.goods_sales_up_selected = false;
					this.goods_sales_under_selected = false;
					// 更新筛选
					this.goods_update_selected = false;
					this.goods_update_up_selected = false;
					this.goods_update_under_selected = false;

					this.mescroll.resetUpScroll()

				} else if (this.goods_price_selected == true && this.goods_price_under_selected == true) {
					// 默认
					this.goods_price_selected = false;
					this.goods_price_up_selected = false;
					this.goods_price_under_selected = false;
					this.order = '';
					this.sort = ''; //空来下序 倒序：desc
					// 销量筛选
					this.goods_sales_selected = false;
					this.goods_sales_up_selected = false;
					this.goods_sales_under_selected = false;
					// 更新筛选
					this.goods_update_selected = false;
					this.goods_update_up_selected = false;
					this.goods_update_under_selected = false;

					this.mescroll.resetUpScroll()

				}
			},
			// 销量筛选
			selectSales: function() {
				var _this = this;
				if (this.goods_sales_selected == false) {
					// 销量筛选
					this.goods_sales_selected = true;
					this.goods_sales_up_selected = true;
					this.goods_sales_under_selected = false;

					this.order = 'click_count';
					this.sort = ''; //空来下序 倒序：desc

					// 价格筛选
					this.goods_price_selected = false;
					this.goods_price_up_selected = false;
					this.goods_price_under_selected = false;
					// 更新筛选
					this.goods_update_selected = false;
					this.goods_update_up_selected = false;
					this.goods_update_under_selected = false;

					this.mescroll.resetUpScroll()

				} else if (this.goods_sales_selected == true && this.goods_sales_up_selected == true) {
					// 销量筛选
					this.goods_sales_selected = true;
					this.goods_sales_up_selected = false;
					this.goods_sales_under_selected = true;

					this.order = 'click_count';
					this.sort = 'desc'; //空来下序 倒序：desc

					// 价格筛选
					this.goods_price_selected = false;
					this.goods_price_up_selected = false;
					this.goods_price_under_selected = false;
					// 更新筛选
					this.goods_update_selected = false;
					this.goods_update_up_selected = false;
					this.goods_update_under_selected = false;

					this.mescroll.resetUpScroll()

				} else if (this.goods_sales_selected == true && this.goods_sales_under_selected == true) {
					// 销量筛选
					this.goods_sales_selected = false;
					this.goods_sales_up_selected = false;
					this.goods_sales_under_selected = false;
					this.order = '';
					this.sort = ''; //空来下序 倒序：desc

					this.goods_price_selected = false;
					this.goods_price_up_selected = false;
					this.goods_price_under_selected = false;

					// 更新筛选
					this.goods_update_selected = false;
					this.goods_update_up_selected = false;
					this.goods_update_under_selected = false;

					this.mescroll.resetUpScroll()

				}

			},

			// 更新筛选
			selectUpdate: function() {
				var _this = this;

				if (this.goods_update_selected == false) {
					// 更新筛选
					this.goods_update_selected = true;
					this.goods_update_up_selected = true;
					this.goods_update_under_selected = false;
					this.order = 'last_update';
					this.sort = ''; //空来下序 倒序：desc
					// 销量筛选
					this.goods_sales_selected = false;
					this.goods_sales_up_selected = false;
					this.goods_sales_under_selected = false;


					this.goods_price_selected = false;
					this.goods_price_up_selected = false;
					this.goods_price_under_selected = false;

					this.mescroll.resetUpScroll()


				} else if (this.goods_update_selected == true && this.goods_update_up_selected == true) {
					// 更新筛选
					this.goods_update_selected = true;
					this.goods_update_up_selected = false;
					this.goods_update_under_selected = true;
					this.order = 'last_update';
					this.sort = 'desc'; //空来下序 倒序：desc
					// 销量筛选
					this.goods_sales_selected = false;
					this.goods_sales_up_selected = false;
					this.goods_sales_under_selected = false;


					this.goods_price_selected = false;
					this.goods_price_up_selected = false;
					this.goods_price_under_selected = false;

					this.mescroll.resetUpScroll()


				} else if (this.goods_update_selected == true && this.goods_update_under_selected == true) {
					// 默认
					// 更新筛选
					this.goods_update_selected = false;
					this.goods_update_up_selected = false;
					this.goods_update_under_selected = false;
					this.order = '';
					this.sort = ''; //空来下序 倒序：desc
					// 销量筛选
					this.goods_sales_selected = false;
					this.goods_sales_up_selected = false;
					this.goods_sales_under_selected = false;


					this.goods_price_selected = false;
					this.goods_price_up_selected = false;
					this.goods_price_under_selected = false;

					this.mescroll.resetUpScroll()
				}

			},

		}
	}
</script>


<style lang="scss">
	/*根元素需要有固定的高度*/
	page {
		height: 100%;
		background-color: #eee;

		// 设置padding
		// .mescroll-body,
		// /deep/.mescroll-body {
		// 	padding-left: 180rpx;
		// }

		/* 顶部 fixed定位*/
		.top-warp {
			z-index: 200;
			position: fixed;
			left: 0;
			right: 0;
			padding: 10px;
            border-bottom: 1px solid #e2e2e2;
		}

		.left-warp {
			z-index: 100;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 180rpx;
			background-color: #eee;

			.tab {
				font-size: 28rpx;
				padding: 28rpx;

				&.active {
					background-color: #fff;
				}
			}
		}
		
		.right-warp{
			padding-left: 180rpx;
			.select-box {
				width: 100%;
				height: 100rpx;
				display: flex;
				text-align: center;
				color: #777777;
			
				.item {
					flex: 2;
					height: 100rpx;
					display: flex;
			
					.left {
						flex: 1;
						height: 100rpx;
						line-height: 100rpx;
						text-align: right;
					}
			
					.left-2 {
						flex: 1;
						height: 100rpx;
						line-height: 100rpx;
						text-align: right;
						color: #F36A31;
					}
			
					.right {
						flex: 1;
						// height: 100rpx;
			
						.top {
							width: 100%;
							// height: 50rpx;
							padding-top: 25rpx;
			
							.img-s {
								width: 30rpx;
								height: 30rpx;
								margin: 0 auto;
			
								image {
									width: 30rpx;
									height: 30rpx;
									object-fit: contain;
								}
							}
						}
			
						.bottom {
							width: 100%;
							height: 50rpx;
							padding-bottom: 20rpx;
			
							.img-s {
								width: 30rpx;
								height: 30rpx;
								margin: 0 auto;
			
								image {
									width: 30rpx;
									height: 30rpx;
									object-fit: contain;
								}
							}
						}
					}
				}
			
				.item-2 {
					flex: 2;
					height: 100rpx;
					padding-top: 20rpx;
			
					.img {
						width: 80rpx;
						height: 60rpx;
						margin: 0 auto;
						padding-left: 28rpx;
						padding-top: 5rpx;
						border-left: 2rpx solid #969696;
			
						image {
							width: 50rpx;
							height: 50rpx;
							object-fit: contain;
						}
					}
				}
			
				.item-3 {
					flex: 1;
					height: 100rpx;
			
					.left {
						width: 100%;
						height: 100rpx;
						line-height: 100rpx;
						text-align: center;
			
					}
			
					.left2 {
						color: #F36A31;
					}
			
				}
			
			}
		}
		
		.goods-box-content {}
	}
</style>